<template>
    <div class="table-container">
        <el-row
            v-loading="listLoading"
            element-loading-text="正在加载新数据"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.3)">
            <transition-group appear>
                <el-col :xs="24" :sm="card.config.sm" :md="card.config.md" :lg="card.config.lg" :xl="card.config.xl" v-for="(card,index) in list" :key="index" style="margin-bottom:20px;padding: 15px">
                    <el-card shadow="hover">
                        <div :style="{height: card.config.height,padding: '6px'}">
                            <fm-generate-form
                                :data="card"
                                :remote="remoteFuncs"
                                :value="editData"
                                ref="generateForm"
                            />
                            <!-- <div v-if="fieldValid[item.relcolumnId] === '1'">
                                <span>{{ item.columnName }} :</span><span>{{ card[item.columnId] }}</span>
                            </div> -->
                        </div>
                    </el-card>
                </el-col>
            </transition-group>
        </el-row>
    </div>
</template>

<script>
export default {
    props: {
        filterData: Object,
        list: Array,
        listLoading: true
    },
    data() {
        return {
            formId: '6439',
            available: 1,
            listArray: {
                'list': [
                    {
                        'type': 'ninecard',
                        'name': '',
                        'icon': 'icon-tupian',
                        'options': {
                            'imgDefaultValue': '##P|TESTINFOR_ICON##',
                            'linkDefaultValue': '',
                            'titleDefaultValue': '##P|TESTINFOR_TITLE##',
                            'size': {
                                'width': 50,
                                'height': 50
                            },
                            'style': {
                                'textAlign': 'center',
                                'backgroundColor': '#BB1616',
                                'borderRadius': '10px',
                                'color': '#000',
                                'fontSize': '12px',
                                'fontWeight': 600
                            },
                            'remoteFunc': 'func_1557998637000_9889'
                        },
                        'key': '1557999159000_8083',
                        'model': 'img_1557998637000_9889',
                        'rules': []
                    }
                ],
                'config': {
                    'formId': '2295',
                    'labelWidth': 100,
                    'labelPosition': 'top',
                    'size': 'small',
                    'column': 4
                }
            },
            editData: {},
            remoteFuncs: {}
        }
    },
    methods: {
        // 无限加载table数据
        loadMore() {
            console.log('到底了')
            this.$emit('loadMore')
        },
        handleScroll() {
            // 获取滚轮位置
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop
            this.height1 = scrollTop
            // 文档高度
            this.height2 = document.body.scrollHeight
            // 可视区域
            this.height3 =
                document.compatMode === 'CSS1Compat'
                    ? document.documentElement.clientHeight
                    : document.body.clientHeight
            // 如果滚动到最低（这里设置离最底还有100距离才触发函数）
            if (this.height3 + this.height1 >= this.height2 - 100 && this.available) {
                this.available = 0
                this.loadMore()
            } else if (this.height3 + this.height1 < this.height2 - 100) {
                this.available = 1
            }
        }
    }
}
</script>
